<template>
	<view class="page">
		<view class="name">钓点专区</view>
		<view class="info">
			
				<radio-group class="uni-list" @change="radioChange">
					<view class="des">是否收费<span class="sp">*</span></view>
					<view class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
						<view>
							{{item.name}}<radio style="margin-left: 20rpx;" color="#4f98f6" :value="item.value" :checked="index === current" />
						</view>
						
					</view>
				</radio-group>
				<radio-group class="uni-list" @change="radioChange1">
					<view class="des">是否住宿<span class="sp">*</span></view>
					<view class="uni-list-cell" v-for="(item, index) in items1" :key="item.value">
						<view>
							{{item.name}}<radio style="margin-left: 20rpx;" color="#4f98f6" :value="item.value" :checked="index === current1" />
						</view>
						
					</view>
				</radio-group>
				<view class="uni-list">
					<view class="des">收费价格<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="prize" @input="Input1" placeholder="如150/天" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">钓点名称<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="spotName" @input="Input2" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">可钓鱼种<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="fish" @input="Input3" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">钓点位置<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="location" @input="Input4" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">联系电话<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="phone" @input="Input5" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
		
		</view>
		
		<view class="name">选择标签</view>
		<view class="info" style="display: flex; justify-content: space-between;">
			<view :class="luya ? 'opt':'opt1'" @click="ly">路亚</view>
			<view :class="taidiao ? 'opt':'opt1'" @click="td">台钓</view>
			<view :class="nongjia ? 'opt':'opt1'" @click="njl">农家乐</view>
			<view :class="zhusu ? 'opt':'opt1'" @click="zs">可住宿</view>
			<view :class="jintang ? 'opt':'opt1'" @click="jt">斤塘</view>
		</view>
		
		<view class="name">打窝专区</view>
		<view class="info">
				<radio-group class="uni-list" @change="radioChange2">
					<view class="des">是否收费<span class="sp">*</span></view>
					<view class="uni-list-cell" v-for="(item, index) in items2" :key="item.value">
						<view>
							{{item.name}}<radio style="margin-left: 20rpx;" color="#4f98f6" :value="item.value" :checked="index === current2" />
						</view>
						
					</view>
				</radio-group>
				<view class="uni-list">
					<view class="des">饵料名称<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="erliao" @input="Input6" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">饵料价格<span class="sp">*</span></view>
					<view class="rig">
						<input type="text" v-model="money" @input="Input7" placeholder="请输入" style="text-align: right;" placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;" />
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="" style="">
					<view class="des" >饵料图片<span class="sp">*</span></view>
					<view class="up">
						<view class="upload" style="margin: 20rpx 0 27rpx;">请上传图片</view>
						<image class="picImg" src="../../static/pic.png" mode=""></image>
					</view>
				</view>
				<view class="add">新增</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				luya:true,
				prize:'',
				spotName:'',
				fish:'',
				location:'',
				phone:'',
				erliao:'',
				money:'',
				 items: [{
							value: 'USA',
							name: '是',
							checked: 'true'
						},
						{
							value: 'CHN',
							name: '否'
						},
						
					],
					items1: [{
								value: 'USA',
								name: '是',
								checked: 'true'
							},
							{
								value: 'CHN',
								name: '否'
							},
							
						],
					items2: [{
								value: 'USA',
								name: '是',
								checked: 'true'
							},
							{
								value: 'CHN',
								name: '否'
							},
							
						],
					current: 0,
					current1: 0,
					current2: 0,
			};
		},
		methods:{
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						console.log('3434343',this.current)
						break;
					}
				}
			},
			radioChange1: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items1[i].value === evt.detail.value) {
						this.current1 = i;
						console.log('3222',this.current1)
						break;
					}
				}
			},
			radioChange2: function(evt) {
				for (let i = 0; i < this.items2.length; i++) {
					if (this.items2[i].value === evt.detail.value) {
						this.current2 = i;
						console.log('3222',this.current2)
						break;
					}
				}
			},
			Input1(e){
				// this.prize = e.target.value
				console.log('990',e.target.value,e)
				
			},
			Input2(e){
				this.spotName = e.target.value
				console.log('991',e.target.value,e)
			},
			Input3(e){
				this.spotName= e.target.value
				console.log('992',e.target.value,e)
			},
			Input4(e){
				this.location = e.target.value
				console.log('993',e.target.value,e)
			},
			Input5(e){
				this.phone = e.target.value
				console.log('994',e.target.value,e)
			},
			Input6(e){
				this.erliao = e.target.value
				console.log('994',e.target.value,e)
			},
			Input7(e){
				this.money = e.target.value
				console.log('994',e.target.value,e)
			},
			
			ly(){
				this.luya = !this.luya
			}
			
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #F7F7F7;
		padding: 45rpx 27rpx;
	}
	.name{
		font-weight: bold;
		font-size: 32rpx;
		color: #1A1A1A;
	}
	.info{
		margin: 20rpx 6rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 34rpx 40rpx;
	}
	.opt{
		width: 100rpx;
		height: 40rpx;
		background: #F0F0F0;
		border-radius: 7rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		line-height: 40rpx;
	}
	.opt1{
		width: 100rpx;
		height: 40rpx;
		background: #E0EEFF;
		border-radius: 7rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #4F98F6;
		text-align: center;
		line-height: 40rpx;
	}
	.uni-list{
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}
	.uni-list-cell{
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
		// justify-content: space-between;
	}
	.des{
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
	}
	.sp{
		color: #F30C0C;
	}
	.rig{
		display: flex;
		
	}
	.up{
		
	}
	.upload{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
	
	.picImg{
		width: 133rpx;
		height: 133rpx;
	}
	.moreImg{
		width: 11rpx;
		height: 19rpx;
		margin-left: 17rpx;
		margin-top: 20rpx;
	}
	.add{
		width: 600rpx;
		height: 67rpx;
		background: #ECF4FF;
		border-radius: 13rpx;
		border: 1px solid #3681F3;
		text-align: center;
		line-height: 67rpx;
		font-weight: 500;
		font-size: 27rpx;
		color: #3681F3;
		margin-top: 32rpx;
	}
</style>
